<template>
  <div>
    <div class="opt-area-02">
      <div class="left-con">
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入姓名" style="width: 164px" v-model="searchInfo.user_name"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入身份证号" style="width: 164px" v-model="searchInfo.cardno"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择一级标签" v-model="searchInfo.first_level_id" @on-change="getTypeName(2,searchInfo.first_level_id)" clearable filterable transfer="" style="width:164px">
            <Option :value="item.id" v-for="item in typeNameList" v-bind:key="item.id">{{item.name}}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择二级标签" v-model="searchInfo.second_level_id" clearable filterable transfer="" style="width:164px">
            <Option :value="item.id" v-for="item in typeNameList2" v-bind:key="item.id">{{item.name}}</Option>
          </Select>
        </div>
        <Button type="info" size="small" @click="findtime()" style="margin-top: 5px;margin-right:5px">搜索</Button>
      </div>
    </div>
    <Table border :columns="columns1" :data="datalist" size="small" ref="table">
      <template slot="action" slot-scope="{ row }">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <Button class="table-action-btn" type="success" size="small" @click="fillUserInfo(row)">查看</Button>
        </Row>
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
          :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <personnel-info-modal :user-info="userInfo" :control-data="controlData" :severUserInfo="severUserInfo" ref="photo"></personnel-info-modal>
  </div>
</template>
<script>
import { findPersonnelLabelInfoList, getTypeName, userinfo, findSubordinateList, findGardenList } from '@/api/eventlist'
import PersonnelInfoModal from './components/personnelInfoModal'
export default {
  components: {
    PersonnelInfoModal
  },
  data () {
    return {
      searchInfo: {},
      userInfo: {},
      severUserInfo: {},
      controlData: {
        show1: false,
        uploadHeader: false,
        readType: 1, // 读取当前人员信息的方式 0未读取 1输入卡号 2读身份证 3人脸对比
        cardnoInput: '',
        showDetail: false,
        photo: '',
        personTags: []
      },
      params: { name: '', pageNo: 1, pageSize: 10, totalRecord: 0, cardno: '', mobile: '', area_id: '', street_id: '', community_id: '', garden_id: '', building_id: '', is_kgh: '' },
      totalnum: 0,
      currentPageNo: 1,
      currentPageSize: 10,
      fileName: 'photo.png',
      photo: '',
      List1: [],
      List2: [],
      List3: [],
      typeNameList: [],
      typeNameList2: [],
      findGardenList: [],
      columns1: [
        { title: '序号', type: 'index', key: 'index', minWidth: 100, align: 'center' },
        { title: '姓名', key: 'user_name', minWidth: 100, align: 'center' },
        { title: '姓别', key: 'sex', minWidth: 100, align: 'center' },
        { title: '证件号码', key: 'cardno', minWidth: 200, align: 'center' },
        { title: '手机号', key: 'mobile', minWidth: 200, align: 'center' },
        { title: '住址', key: 'register_address', minWidth: 200, align: 'center' },
        { title: '一级标签', key: 'first_level_name', minWidth: 200, align: 'center' },
        { title: '二级标签', key: 'second_level_name', minWidth: 200, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 200, align: 'center' }
      ],
      datalist: [],
      loadData: true,
      Adisabled: false,
      Bdisabled: false
    }
  },
  methods: {
    init () {
      this.searchInfo.pageNo = this.searchInfo.currentPageNo
      this.searchInfo.pageSize = this.searchInfo.currentPageSize
      findPersonnelLabelInfoList(this.searchInfo).then(res => {
        if (res.data.errcode === 0) {
          this.datalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          console.log(this.totalnum)
          this.loadData = false
        }
      })
    },
    findtime () {
      this.currentPageNo = 1
      this.init()
    },
    getTypeName (grade, pid) {
      getTypeName({ grade: grade, pid: pid }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 1) {
            this.typeNameList = res.data.data
          } else if (grade === 2) {
            this.typeNameList2 = res.data.data
          } else {
            this.$Notice.error({ title: '参数错误', desc: '参数错误' })
          }
        }
      })
    },
    fillUserInfo (item) {
      this.userOverall = item
      // if (!this.userOverall.id) return
      this.getUserInfo(item.cardno)
      this.controlData.showDetail = true
    },
    getUserInfo (cardno) {
      this.controlData.cardno = cardno
      this.userOverall.cardno = cardno
      userinfo(cardno).then(res => {
        if (res.data.errcode === 0) {
          this.userInfo = res.data.data
          if (this.userInfo.photo === undefined) {
            this.userInfo.photo = ''
          }
          // this.$refs.photo.photoShow(this.userInfo.photo)
          if (this.userInfo.focus_group) {
            this.controlData.personTags = this.userInfo.focus_group.split(',')
          } else {
            this.controlData.personTags = []
          }
          // 不论是否上传头像，查询个人信息时包含头像则不上传
          if (this.userInfo.photo) {
            this.controlData.photo = this.userInfo.photo
            this.controlData.uploadHeader = false
          } else {
            this.controlData.photo = this.controlData.photo || this.nophoto
          }
          if (this.controlData.readType !== 2) {
            this.userOverall.name = this.userInfo.name
            this.userOverall.address = this.userInfo.address
            this.userOverall.sex = this.userInfo.sex
            this.userOverall.folk = this.userInfo.folk
          }
          this.userOverall.readCount++
          this.userOverall.id = this.userInfo.id
          this.userOverall.userInfo = this.userInfo
        } else {
          this.$Notice.error({ title: '查询失败！', desc: res.data.errmsg })
        }
      })
    },
    findGridGradenList () {
      findGardenList().then(ret => {
        if (ret.data.errcode === 0) {
          this.GridGradenList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    },
    findDistrictList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === 2) {
            this.List1 = ret.data.data
          } else if (e1 === 3) {
            this.List2 = ret.data.data
          } else if (e1 === 4) {
            this.List3 = ret.data.data
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    }
  },
  mounted () {
    this.init()
    this.getTypeName(1, 0)
    this.severUserInfo = this.$store.state.user.severUserInfo
  },
  watch: {
    'severUserInfo.company_grade' (val) {
      if (val === '2') {
        this.findDistrictList(2, '999999999')
      } else if (val === '3') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.company_id
        this.findDistrictList(3, this.params.area_id)
        this.Adisabled = true
      } else if (val === '4') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.parent_id
        this.findDistrictList(3, this.params.area_id)
        this.params.street_id = this.severUserInfo.company_id
        this.findDistrictList(4, this.params.street_id)
        this.Adisabled = true
        this.Bdisabled = true
      } else if (val === '5') {
        this.findGridGradenList()
      }
    }
  }
}
</script>
<style>
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: gray;
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-right: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
</style>
